import React, { useEffect, useState } from 'react'
/*
  useEffect:
     Effect:相当于componentDidMount,componentDidUpdate,componentWillUnmount,可以在函数组件中执行副作用操作
     useEffect有两个参数,参数1是回调函数,参数2是一个数组,用来限定参数1的触发条件
              若没写参数2,则默认在挂载完成,更新完成
              若参数2是一个空数组,则只会在挂载完成时触发
              若参数2 的数组中有元素,则会在挂载完整,以及所有元素所在阶段触发
     useEffect会返回一个函数,这个函数会在组件被卸载或者页面重新渲染时触发
     useEffect可以书写多次
*/

export default function App() {
  const [count,setCount] = useState(0)
  const [isHot,setIsHot] = useState(true)

  // useEffect(()=>{
  //   //m每当组件在开发中安装时,React会立即卸载和重装组件,第二次挂载时回复第一次的状态
  //   //主要是模拟用户行为,确保代码能够正确处理状态回复,所以严格模式下会打印两次

  //   console.log("isHot执行了");//初始化时执行一次,在执行卸载,再一次执行

  //   return ()=>{
  //     console.log("isHot的Effect卸载函数"+count);
  //   }
  // })

  // useEffect(()=>{
  //   //m每当组件在开发中安装时,React会立即卸载和重装组件,第二次挂载时回复第一次的状态
  //   //主要是模拟用户行为,确保代码能够正确处理状态回复,所以严格模式下会打印两次

  //   console.log("isHot执行了");

  //   return ()=>{
  //     console.log("isHot的Effect卸载函数"+count);
  //   }
  // },[])//参数二可以限定在什么时候执行

   useEffect(()=>{
    //m每当组件在开发中安装时,React会立即卸载和重装组件,第二次挂载时回复第一次的状态
    //主要是模拟用户行为,确保代码能够正确处理状态回复,所以严格模式下会打印两次

    console.log("isHot执行了");

    return ()=>{
      console.log("isHot的Effect卸载函数"+count);
    }
  },[count,isHot])//参数二可以限定在什么时候执行

  
  

  return (
    <div>
      <h1>count的值是{count}</h1>
      <button onClick={()=>{setCount(count+1)}}>涨涨涨</button>

      <hr />

      <h1>今天的天气真{isHot?"热热热":"凉快啊"}</h1>
      <button onClick={()=>{setIsHot(!isHot)}}>冷气冷气快过来</button>
    </div>
  )
    
  
}
